<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="升级/加钟" />
        <view
            class="wrap-order-status flex"
            :style="'top:' + navigationHeight + 'px;'"
        >
            <block v-for="(item, index) in tab_list" :key="index">
                <view
                    class="status-item flex align-center just-center"
                    @click="onTab(index)"
                >
                    <view :class="{ active: item.status === status }">
                        {{ item.title }}
                    </view>
                </view>
            </block>
        </view>

        <view>
            <contentUp
                v-if="status == 0"
                :dataInit="dataInit"
                :dataInfo="dataInfo"
                :dataList="dataList"
                :showStepper="showStepper"
                :number="number"
                :technician="technician"
                @choose="choose"
                @onNumChange="onNumChange"
            ></contentUp>

            <addLock
                v-if="status == 1"
                :dataInit="dataInit"
                :dataInfo="dataInfo"
                :dataList="dataList"
                :showStepper="showStepper"
                :number="number"
                :technician="technician"
                @choose="choose"
                @onNumChange="onNumChange"
            ></addLock>
        </view>

        <view class="btns">
            <view class="btn" v-if="status == 0" @click="submitUp()">
                提交升级
            </view>
            <view class="btn" v-if="status == 1" @click="submitAdd()">
                提交加钟
            </view>
        </view>
    </div>
</template>
<script>
import contentUp from "./components/contentUp.vue";
import addLock from "./components/addLock.vue";
import { upgradeClock } from "@/API/API/recruit.js";
export default {
    components: {
        contentUp,
        addLock,
    },
    data() {
        return {
            navigationHeight: this.$navigationHeight,
            tab_list: [
                {
                    title: "项目升级",
                    status: 0,
                },
                {
                    title: "项目加钟",
                    status: 1,
                },
            ],
            status: 0,
            dataInfo: {},
            dataInit: {},
            id: 0,
            dataList: [],
            technician: {},
            number: 1,
            showStepper: false,
        };
    },

    onLoad(options) {
        if (options.id) {
            this.id = options.id;
        }
        this.getData();
    },

    watch: {
        number() {
            if (this.number < 1) {
                this.dataInit = this.dataInfo;
                this.showStepper = false;
                this.dataList.forEach((item) => {
                    item.show = true;
                });
            }
        },
    },

    methods: {
        getData() {
            upgradeClock({
                order_id: this.id,
                type: this.status + 1,
            }).then((res) => {
                this.dataList = res.data.list;
                this.technician = res.data.technician;
                this.dataInfo = res.data.service;
            });
        },
        onTab(index) {
            this.showStepper = false;
            this.number = 0;
            this.dataList.forEach((item) => {
                item.show = true;
            });
            this.status = index;
            this.getData();
        },
        // 选择升级项目
        choose(item, index) {
            this.showStepper = true;
            this.dataInit = item;
            this.dataList.forEach((item, i) => {
                if (i == index) {
                    item.show = false;
                } else {
                    item.show = true;
                }
            });
            this.$set(this.dataList, this.dataList);
            this.number = 1;
        },
        // 修改数量
        onNumChange(type) {
            if (type === "sub") {
                this.number--;
            } else if (type === "add") {
                if (this.number < this.dataInit.pact_num) {
                    this.number++;
                } else {
                    uni.showToast({
                        title:
                            `时间段内仅可${
                                this.status == 0 ? "升级" : "加钟"
                            }` +
                            this.dataInit.pact_num +
                            "次此项目",
                        icon: "none",
                    });
                }
            }
        },
        // 提交升级
        submitUp() {
            if (!this.showStepper) {
                uni.showToast({
                    title: "请选择项目",
                    icon: "none",
                });
                return;
            }
            this.dataInit.project_introduction = "";
            uni.navigateTo({
                url:
                    "/subPages/technician/recruit/confirm?info=" +
                    JSON.stringify({
                        dataInfo: this.dataInfo,
                        dataInit: this.dataInit,
                        number: this.number,
                        order_id: this.id,
                        pay_method: "h5",
                        service_id: this.dataInit.id,
                        technician_id: this.technician.id,
                        technician_name: this.technician.name,
                        technician: this.technician,
                        travel_type: 2,
                        type: 3,
                    }),
            });
        },
        // 提交加钟
        submitAdd() {
            if (!this.showStepper) {
                uni.showToast({
                    title: "请选择项目",
                    icon: "none",
                });
                return;
            }
            this.dataInit.project_introduction = "";
            uni.navigateTo({
                url:
                    "/subPages/technician/recruit/confirm?info=" +
                    JSON.stringify({
                        dataInfo: this.dataInfo,
                        dataInit: this.dataInit,
                        number: this.number,
                        order_id: this.id,
                        pay_method: "h5",
                        service_id: this.dataInit.id,
                        technician_id: this.technician.id,
                        technician_name: this.technician.name,
                        technician: this.technician,
                        travel_type: 2,
                        type: 2,
                    }),
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    padding: 20rpx;
    box-sizing: border-box;
}
.card {
    padding: 28rpx 25rpx;
    background-color: white;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    .title {
        color: $title-color;
    }
}
.wrap-order-status {
    position: sticky;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 100rpx;
    background: white;
    z-index: 10;
    flex-wrap: wrap;

    .status-item {
        flex: 1;
        height: 100rpx;
        overflow: hidden;

        > view {
            display: inline-block;
            height: 100rpx !important;
            line-height: 100rpx;
            box-sizing: border-box;
            border-bottom: 6rpx solid white;
        }

        .active {
            border-color: $theme-color;
        }
    }
}
.wrap-info {
    padding: 30rpx 20rpx;
    box-sizing: border-box;

    .info-bg {
        padding: 20rpx 0;
        width: 100%;
        overflow: hidden;
        position: relative;

        .file {
            width: 176rpx;
            height: 176rpx;
            border-radius: 20rpx;
            overflow: hidden;
        }

        .info-right {
            margin-left: 20rpx;
            flex: 1;
            overflow: hidden;
            margin-right: 10rpx;

            .service-time {
                margin-top: 14rpx;
                color: #a3a3a3;
            }

            .price {
                margin-top: 14rpx;

                .symbol {
                    margin-right: 5rpx;
                }
            }
        }

        .arrow {
            .btn {
                font-size: 24rpx;
                height: 50rpx;
                line-height: 50rpx;
                padding: 0 20rpx;
                border-radius: 20rpx;
                text-align: center;
                color: white;
                background-color: $theme-color;
                position: absolute;
                top: 40%;
                right: 0rpx;
            }
        }
        .stepper {
            position: absolute;
            right: 0;
            top: 20%;
            z-index: 10;
            .left {
                width: 38rpx;
                height: 38rpx;
                border: 2rpx solid $theme-color;
                border-radius: 20rpx;
                .icon {
                    width: 16rpx;
                    height: 2rpx;
                }
            }
            .number {
                margin: 0 10rpx;
            }
            .right {
                width: 38rpx;
                height: 38rpx;
                background: $theme-color;
                border-radius: 20rpx;
                .icon {
                    width: 16rpx;
                    height: 16rpx;
                }
            }
        }
    }
    .info-bg:last-child {
        padding-bottom: 0;
    }
}

.bottomBox {
    border-top: 2rpx solid #ececec;
    padding-top: 30rpx;
    .name {
        flex: 1;
        overflow: hidden;
        margin: 0 10rpx;
        line-height: 1.2;
    }
    .up {
        width: 172rpx;
        height: 46rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
}
.t-l {
    text-align: left;
}
.t-r {
    text-align: right;
}

.title-color {
    color: $title-color;
}

.price-color {
    color: $price-color !important;
}

.premium {
    color: #999;
    font-weight: normal;
    margin-left: 20rpx;
}

.premiumPrice {
    color: $price-color;
    font-weight: normal;
}
.premiumPrice::before {
    content: "¥";
    margin-left: 10rpx;
}

.lock {
    width: 24.15rpx;
    height: 24.15rpx;
    margin-right: 5rpx;
}
.border_bottom {
    border-bottom: 2rpx solid #ececec;
}
.border_bottom:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
    z-index: 99999;
    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: $grad-theme-color;
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
</style>